<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Wangrui">
    <title>动画帧</title>
    <style>
        progress{
            width: 600px;
        }
    </style>
</head>
<body>
    <div>
        <progress value="0" max="100"></progress>
    </div>
    <button type="button" onclick="stratAF()">开始</button>
    <button type="button" onclick="stopAF()">停止</button>
    <button type="button" onclick="resetAF()">重置</button>
</body>
</html>
<script>
    var progress = document.querySelector('progress');
    // 表示进度条的当前的进度值
    var currentValue = 0;
    var ref;

    function stratAF(){
        // 当大于100时，结束函数
        if(currentValue > 100){
            return;
        }
        currentValue ++;
        progress.value = currentValue;

        // requestAnimationFrame 是根据浏览器的刷新频率(一般是60次/秒)，
        // 执行想要的动画的函数，这样会给人带来流畅的动画体验

        // 也可以通过 setInterval 来实现动画，但是这样写效果可能不流畅，
        // 而且会占用额外的资源
        ref =  window.requestAnimationFrame(stratAF);
    }

    function stopAF(){
        // 取消动画
        cancelAnimationFrame(ref);
    }
    // 重置
    function resetAF(){
        stopAF();
        progress.value = currentValue = 0;
    }



</script>